<template>
  <div id="cesiumContainer">
    <div class="plotting-tool">
      <el-button size="mini" @click="startDraw">开始创建</el-button>
    </div>
  </div>
</template>
<script>
import { initViewer } from '@/utils/cesiumUtils'
import CreateFreeLine from "./CreateFreeLine";
export default {
  data() {
    return {
      viewer: null
    };
  },
  mounted() {
    this.viewer = initViewer('cesiumContainer')
    console.log(this.viewer)
    // this.initCamera();

  },
  methods: {
    startDraw() {
      CreateFreeLine(
        this.viewer,
        [],
        {
          color: Cesium.Color.BLUE,
          width: 2,
        },
        function (e) {
          console.log(e);
        }
      );
    },
    initCamera() {
      this.viewer.camera.flyTo({
        destination: window.Cesium.Cartesian3.fromDegrees(
          110.62898254394531,
          40.02804946899414,
          10000.0
        ), //相机飞入点
      });
    },
    getLocation() {
      let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
      handler.setInputAction(function (event) {
        let earthPosition = this.viewer.scene.pickPosition(event.position);
        if (Cesium.defined(earthPosition)) {
          let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
          let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
          let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
          let height = cartographic.height.toFixed(2);
          console.log(earthPosition, {
            lon: lon,
            lat: lat,
            height: height,
          });
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
  },
};
</script>
<style lang="scss" scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  position: relative;
  .plotting-tool {
    position: absolute;
    margin: 10px;
    padding: 10px;
    border: 1px solid rgb(39, 38, 38);
    border-radius: 5px;
    background-color: rgba(97, 95, 95, 0.8);
    z-index: 10;
  }
}
</style>
